<template>
  <div class="dashboard">
    <div class="container">
      <!-- 左侧内容 -->
      <div class="left">
        <div class="panel">
          <!-- MARK 个人信息 -->
          <div class="user-info">
            <img v-if="avatar" class="avatar" :src="avatar" alt="" />
            <span v-else class="username">{{ name?.charAt(0) }}</span>
            <div class="company-info">
              <!-- TODO 绑定company/name -->
              <div class="title">
                <!-- 美丽中国应急管理部 -->
                <!-- {{ company }} -->
                <span style="color: #409eff"> {{ company }} </span>
              </div>
              <div class="depart" style="color: #409eff">
                {{ name }} ｜ {{ company }}-{{ departmentName }}
              </div>
            </div>
          </div>
          <!-- MARK 待办 -->

          <el-divider></el-divider>
          <div class="todo-list">
            <div class="todo-item">
              <span>员工规模</span>
              <!-- 起始值 终点值 动画时间 -->
              <count-to
                :start-val="0"
                :end-val="homeData.employeeTotal"
                :duration="1000"
              />
            </div>
            <div class="todo-item">
              <span>正式员工</span>
              <count-to
                :start-val="0"
                :end-val="homeData.regularEmployeeTotal"
                :duration="1000"
              />
            </div>
            <div class="todo-item">
              <span>管理员规模</span>
              <count-to
                :start-val="0"
                :end-val="homeData.managerTotal"
                :duration="1000"
              />
            </div>
            <div class="todo-item">
              <span>部门数</span>
              <count-to
                :start-val="0"
                :end-val="homeData.departmentTotal"
                :duration="1000"
              />
            </div>
            <div class="todo-item">
              <span>角色数</span>
              <count-to
                :start-val="0"
                :end-val="homeData.roleTotal"
                :duration="1000"
              />
            </div>
          </div>
        </div>
        <!-- MARK 快捷入口 -->
        <div class="panel">
          <div class="panel-title">
            <el-tag size="medium ">快捷入口</el-tag>
            <el-divider></el-divider>
          </div>
          <!-- <div class="panel-title"></div> -->
          <div class="quick-entry">
            <div class="entry-item">
              <div
                class="entry-icon approval"
                style="cursor: pointer"
                @click="$router.push('/approval')"
              />
              <span>假期审批</span>
            </div>
            <div class="entry-item">
              <div
                class="entry-icon social"
                style="cursor: pointer"
                @click="$router.push('/social')"
              />
              <span>社保管理</span>
            </div>
            <div class="entry-item">
              <div
                class="entry-icon role"
                style="cursor: pointer"
                @click="$router.push('/role')"
              />
              <span>角色管理</span>
            </div>
            <div class="entry-item">
              <div
                class="entry-icon salary"
                style="cursor: pointer"
                @click="$router.push('/salary')"
              />
              <span>薪资设置</span>
            </div>
            <div class="entry-item">
              <div
                class="entry-icon bpm"
                style="cursor: pointer"
                @click="$router.push('/department')"
              />
              <span>组织管理</span>
            </div>
          </div>
        </div>

        <!-- MARK department 图表数据 -->
        <div class="panel">
          <div class="panel-title">
            <el-tag size="medium ">组织规模一览</el-tag>
            <el-divider></el-divider>
          </div>
          <!-- <div class="panel-title"></div> -->
          <div class="chart-container">
            <div class="chart-info">
              <div class="info-main">
                <!-- <span>部门总数</span> -->
                <!-- <count-to
                  :start-val="0"
                  :end-val="homeData.department?.total"
                  :duration="1000"
                /> -->
              </div>
              <div class="info-list">
                <div class="info-list-item">
                  <!-- <span>总人数</span> -->
                  <!-- <count-to
                    :start-val="0"
                    :end-val="homeData.department?.emTotal"
                    :duration="1000"
                  /> -->
                </div>
              </div>
            </div>
            <!-- MARK department图 -->
            <div class="chart">
              <!-- 图表 -->
              <div ref="department" style="width: 600px; height: 250px" />
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right">
        <!-- MARK 帮助链接 -->
        <div class="panel">
          <div class="panel-title">
            <el-tag size="medium ">帮助链接</el-tag>
            <el-divider></el-divider>
          </div>
          <div class="help">
            <div class="help-left">
              <div class="help-list">
                <div class="help-block" @click="help(1)">
                  <i class="icon-entry" />
                  入门指南
                </div>
                <div class="help-block" @click="help(2)">
                  <i class="icon-help" />
                  帮助手册
                </div>
                <div class="help-block" @click="help(3)">
                  <i class="icon-support" />
                  技术支持
                </div>
                <div class="help-block" @click="help(4)">
                  <i class="icon-add" />
                  添加链接
                </div>
              </div>
            </div>
            <div class="help-right">
              <!-- MARK 日历 -->
              <div class="calendar">
                <!-- <el-calendar /> -->
                <el-calendar />
              </div>
            </div>
          </div>
        </div>
        <!-- MARK 通知公告 -->
        <div class="panel">
          <div class="panel-title">
            <el-tag size="medium ">通知公告</el-tag>

            <i
              class="el-icon-refresh-left"
              style="
                float: right;
                margin-right: 10px;
                margin-top: 5px;
                cursor: pointer;
              "
              @click="getMessageList"
            ></i>
            <el-divider></el-divider>
          </div>
          <!-- <div class="panel-title"></div> -->
          <div class="information-list">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="information-list-item"
            >
              <img v-if="item.icon" :src="item.icon" alt="" />
              <span v-else class="username">{{
                item.username?.charAt(0)
              }}</span>
              <div>
                <p>
                  {{ item.notice }}
                </p>
                <p>{{ item.createTime }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import { getHomeData, getMessageList } from '@/api/home'
// import * as echarts from 'echarts' // 引入所有图
import * as echarts from 'echarts/core' // 引入核心包
import { BarChart, LineChart } from 'echarts/charts' // 引入图
import { GridComponent, TitleComponent, TooltipComponent, DatasetComponent, TransformComponent } from 'echarts/components' // 引入组件
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers'
import parseTime from '@/utils/parse-time'
// MARK 按需导入注册
echarts.use([
  // LineChart,
  GridComponent, TitleComponent, TooltipComponent, DatasetComponent, TransformComponent,
  CanvasRenderer,
  LabelLayout, UniversalTransition,
  BarChart
])

export default {
  components: {
    CountTo
  },
  data () {
    return {
      homeData: {}, // 存放首页数据的对象
      list: []
    }
  },
  // 计算属性
  computed: {
    ...mapGetters(['name', 'avatar', 'company', 'departmentName']) // 映射给了计算属性
  },
  /**
   * // MARK 图表数据用watch
   * 因为获取数据在created
   * 初始化图表在mounted
   * 执行mouted时
   * 数据并不能保证能够获取到
   * 所以采用获取watch监听数据变化
   * 只要数据变化，就设置图表的options
   */
  watch: {
    homeData () {
      console.log(this.homeData)
      // 设置图表

      // MARK 组织规模图
      this.department.setOption({
        backgroundColor: '#edfbff', // 背景颜色
        tooltip: {
          trigger: 'item', // 悬停在具体数据项上时显示提示框
          formatter: function (params) {
            // 自定义提示框内容
            return `${params.name}: ${params.value}`;
          }
        },
        xAxis: {
          type: 'category',
          data: this.homeData.department?.xAxis,
          // data: [
          //   "aaaaaaaa", "bbbbb", "ccc", "d", "e", "f", "g"
          // ]
          axisLabel: {
            fontSize: 12, // 设置字体大小
            rotate: 0,   // 旋转角度，避免文字重叠
            interval: 0   // 显示所有文字
          }
        },
        yAxis: {
          type: 'value',
          interval: 1
        },
        series: [
          {
            barWidth: 20, // 柱状图宽度
            itemStyle: {
              borderRadius: 5, // 圆角
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#14c8d4' }, // 渐变起始颜色
                { offset: 1, color: '#2263a0' }  // 渐变结束颜色
              ])
            },
            data: this.homeData.department?.yAxis,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      })
    }
  },
  created () {
    // 图表乞求数据
    this.getHomeData()
    // 消息盒子
    this.getMessageList()
  },
  mounted () {
    // MARK 不需要响应化变量 实例本身会有setOption来影响图表的动态渲染
    this.department = echarts.init(this.$refs.department)
  },
  methods: {
    async getHomeData () {
      this.homeData = await getHomeData()
    },
    async getMessageList () {
      // this.list = await getMessageList()
      const res = await getMessageList()
      this.list = res.map(item => ({
        ...item,
        // MARK 使用 parseTime 转换 createTime
        createTime: parseTime(item.createTime)
      }))
    },
    help (index) {
      let message = '内容填充失败！'
      let title = '数据错误！'
      if (index == 1) {
        title = '入门指南'
        message = '这是入门指南的内容...'
      } else if (index == 2) {
        title = '帮助手册'
        message = '这是帮助手册的内容...'
      } else if (index == 3) {
        title = '技术支持'
        message = '这是技术支持的内容...'
      } else {
        title = '提示'
        message = '请联系管理员操作...'
      }
      this.$notify({
        title,
        message,
        duration: 3 * 1000
      });
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard {
  background: #f5f6f8;
  width: 100%;
  // min-height: calc(100vh - 80px);
  min-height: 100vh;

  ::v-deep .el-calendar-day {
    height: 40px;
  }

  .date-content {
    // height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
  }
  .date-content .rest {
    color: #fff;
    border-radius: 50%;
    background: rgb(250, 124, 77);
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
  }
  .date-content .text {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
  }
  ::v-deep .el-calendar-table td.is-selected .text {
    background: #409eff;
    color: #fff;
    // border-radius: 50%;
    // border: 1px solid #000;
  }
  ::v-deep .el-calendar__header {
    // MARK 日历头部隐藏
    display: none;
    // font-size: 10px;
  }
  .container {
    display: flex;
    .right {
      width: 50%;
      // flex: 4;
      .panel {
        margin-left: 8px;
      }
      :nth-child(1) {
        margin-top: 0;
      }
    }
    .left {
      // flex: 1;
      :nth-child(1) {
        margin-top: 0;
      }
    }
    .panel {
      background-color: #fff;

      margin-top: 8px;
      padding: 20px;
      .panel-title {
        font-size: 16px;
        color: #383c4e;
        font-weight: 500;
      }
      // 用户信息样式
      .user-info {
        display: flex;
        .avatar {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background-color: #d9d9d9;
          line-height: 48px;
          text-align: center;
        }
        .username {
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 50%;
          // MARK 默认头像颜色
          background: #afe2fb;
          color: #fff;
          margin-right: 4px;
        }
        .company-info {
          margin-left: 10px;
          height: 48px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          // padding-right: 20px;
          // background: #00000003;
          .title {
            color: #383c4e;
            font-weight: 500;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;

            span {
              // font-size: 12px;
              text-align: center;
              padding: 2px 8px;
              border-radius: 2px;
              color: #697086;

              padding-right: 20px;
              padding-left: 8px;
              border-radius: 5px;
              background: #e4ebfa;
            }
          }
          .depart {
            font-size: 14px;
            color: #697086;
            font-weight: 400;
            margin-top: 6px;
            padding: 3px 0;
            padding-right: 40px;
            padding-left: 8px;
            border-radius: 5px;
            background: #e4ebfa;
          }
        }
      }
      // 通知样式
      .todo-list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        .todo-item {
          width: 18%;
          height: 90px;
          display: flex;
          flex-direction: column;
          padding: 10px;
          justify-content: space-around;
          :nth-child(1) {
            color: #697086;
            font-size: 14px;
          }
          :nth-child(2) {
            color: #383c4e;
            font-size: 30px;
            font-weight: 500;
          }
        }
      }
      // 快捷入口
      .quick-entry {
        margin-top: 16px;
        display: flex;
        .entry-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 60px;
          &:nth-child(1) {
            margin-left: 0px;
          }
          .entry-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f5f6f8;
            background-size: cover;
            // MARK 图标设置
            &.approval {
              background-image: url('~@/assets/common/approval.png');
            }
            &.social {
              background-image: url('~@/assets/common/social.png');
            }
            &.salary {
              background-image: url('~@/assets/common/salary.png');
            }
            &.role {
              background-image: url('~@/assets/common/role.png');
            }
            &.bpm {
              background-image: url('~@/assets/common/bpm.png');
            }
          }
          span {
            color: #697086;
            font-size: 14px;
            margin-top: 8px;
          }
        }
      }
      // 图表数据
      .chart-container {
        display: flex;
      }
      // 帮助链接
      .help {
        display: flex;
        .help-left {
          width: 25%;
        }
        .help-right {
          flex: 1;
        }
        .help-list {
          .help-block {
            background: #d7f5ff70;
            border: 1px solid #d9ecff;
            border-radius: 8px;
            width: 100%;
            height: 54px;
            padding: 17px 6px;
            font-size: 14px;
            color: #06060686;
            margin-top: 23px;
            i {
              width: 18px;
              height: 18px;
              display: inline-block;
              background-size: cover;
              // 垂直居中
              vertical-align: middle;
            }
            i.icon-help {
              background-image: url('~@/assets/common/help.png');
            }
            i.icon-support {
              background-image: url('~@/assets/common/support.png');
            }
            i.icon-add {
              background-image: url('~@/assets/common/add.png');
            }
            i.icon-entry {
              background-image: url('~@/assets/common/entry.png');
            }
          }
          .help-block:hover {
            color: #7fbdf3;
            background: #d7f5ff;
            cursor: pointer;
          }
        }
      }
      // 通知公告
      .information-list {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1em;
        height: 208px;
        // max-height: 208px;
        overflow: scroll;
        // white-space: nowrap; /* 强制在同一行内显示文本 */
        text-overflow: ellipsis; /* 当文本溢出时显示省略号 */

        /* 隐藏滚动条 */
        // &::-webkit-scrollbar {
        //   display: none; // 隐藏滚动条
        // }
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: 8px; // 滚动条宽度
          height: 0px; // 滚动条高度（针对横向滚动条）
        }

        /* 滚动条轨道样式 */
        &::-webkit-scrollbar-track {
          background: #f1f1f1; // 轨道背景颜色
          border-radius: 4px; // 圆角
        }

        /* 滚动条滑块样式 */
        &::-webkit-scrollbar-thumb {
          background: #91edff; // 滑块颜色
          border-radius: 4px; // 圆角
        }
        .information-list-item {
          display: flex;
          align-items: center;
          margin: 15px 0;
          img {
            // width: 55px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
          }
          .username {
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            background: #f6fafe;
            color: #0092c3;
            margin-right: 10px;
          }
          .col {
            color: #8a97f8;
          }
          div :nth-child(2) {
            color: #697086;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
